<script setup>
import {useRoute, useRouter} from "vue-router";
import {ElSpace,ElRow,ElCol} from "element-plus"
import axios from "@/utils/NetWork.js"
import mediaStore from "@/store/MediaStore.js"
import {ref} from "vue";

const router = useRouter();
const route = useRoute();
const store = mediaStore();
const {type,uid,id} = route.query;
console.log(type,uid);
const data = ref(null)

axios.post(`/fetch/${type}`,{id},{
  responseType: "blob"
})
    .then((res) => res.data )
    .then(res => {
      data.value = URL.createObjectURL(res);
    })
</script>

<template>
  <el-row direction="vertical" style="width: 100%">
    <el-col >
      <div class="content">
        <img :src="data" width="100%"/>
      </div>
    </el-col>
    <el-col class="disc">
      <el-text>lrmonea shlsnnlgnek slgkahnglkenawg jsakjozshgjglkjwslkah;pj jshal;gngew</el-text>
    </el-col>
  </el-row>
</template>

<style scoped>
.content{
  margin: 0 auto;
  width: 700px;
  height: 500px;
  display: flex;
  align-items: center;
}
.disc{
  width: 100%;
  margin-top:100px
}
</style>